<template>
  <lay-form-item prop="avatar">
    <lay-col md="24" class="saveBtn">
      <lay-avatar :src="imgurlss" radius class="avatar"></lay-avatar>
    </lay-col>
  </lay-form-item>
  <lay-form-item prop="imgurl">
    <lay-col md="24">
      <lay-col v-show="false">
        <lay-input v-model="imgurl"></lay-input>
      </lay-col>
    </lay-col>
    <div v-permission="PerKey.Upload_Upload">
      <lay-col md="24" class="saveBtn">
        <lay-upload @done="getUploadFile" :url="systemConfig.uploadUrl" field="File" :data="uploadConfig.uploadUser"
          :headers="uploadHeaders" acceptMime="image/png, image/jpeg">
          <template v-slot:default="params">
            <lay-button type="normal" prefix-icon="layui-icon-upload-circle">上传照片</lay-button>
          </template>
        </lay-upload>
      </lay-col>
    </div>
  </lay-form-item>
</template>

<script lang="ts" name= "UploadAvatar" setup>
import { ref, watch } from "vue";
import { PerKey } from "../../library/permissionConst"
import { uploadConfig, systemConfig } from "../../library/config"
import { layer } from "@layui/layer-vue";
import { getToken } from '../../library/cookieUtil'
const token = getToken();
const uploadHeaders = { Authorization: "Bearer " + token }

interface UploadProps {
  modelValue?: String,
}
const emit = defineEmits(["update:modelValue"])

const props = withDefaults(defineProps<UploadProps>(), {
  modelValue: String,
});

const imgurl = ref(props.modelValue)
let imgurlss = ref()

const getUploadFile = (res: any) => {
  let up = JSON.parse(res.data)
  if (up.status == 1) {
    layer.msg(up.msg)
    emit('update:modelValue', up.data.url)
  } else {
    layer.msg(up.error)
  }
};

watch(
  () => props.modelValue,
  (value) => {
    imgurl.value = value;
    imgurlss.value = systemConfig.hostURL + value
    //console.log(value)
  },
)
</script>
<style scoped>
.avatar {
  width: 120px;
  height: 120px;
}
</style>